<template>
  <div class="todoListBox">
    <div class="header-box">
      <div class="header-left">
        <div>+</div>
        <h2>Todo List</h2>
      </div>
      <div class="hearder-right">
        <button class="allSelect" @click="handleAllSelect">全选</button>
        <button class="addHeard" @click="handleAdd"> 添加</button>
      </div>
    </div>

    <div class="content">
      <div class="content-item"
           v-for="(item,index) in todoList" :key="item.id"
      >
        <!--     选中，checekbox   -->
        <div class="content-left" @click="handleSelect(index,item.id)">
          <span :style="item.isChecked ? 'opacity : 1':'opacity:0' "> </span>
        </div>
        <!--     input输入框-->
        <input
            type="text"
            class="content-input"
            v-model="item.text"
            :disabled = "item.isChecked"
            :class="item.isChecked ? 'line-through' : '' "
            @blur="handleBlur"
        >
        <!--            -->
        <!--     info   -->
        <div class="content-right">
          <p>{{item.time}} </p>
          <button class="delete_todo" @click="headleDelet(index,item.id)">删除</button>
        </div>
      </div>



    </div>
  </div>

</template>




<script>
import dayjs from 'dayjs'
// import EchartsDemo from "./components/EchartsDemo.vue";
export default {
  name: 'todolist',
  // components: {EchartsDemo},
  data(){
    return{
      todoList:[],
      todo: 0
    }
  },
  created(){
    this.created()
  },
  methods:{
    //  添加工能
    handleAdd(){
      this.todo += 1
      this.todoList.unshift({
        id:this.randomID(),
        isChecked:false, // 是否选中
        text:"", //input框内容
        time: dayjs(new Date).format("YY--MM--DD HH:mm"), // 时间
      })
    },
    created(){
      let getlist = JSON.parse(window.localStorage.getItem("todoList1"))
      console.log("getlist:"+getlist)
      if (getlist === null){
        console.log("没有数据")
        this.todoList = [{
          id:this.randomID(),
          isChecked:false, // 是否选中
          text:"请你输入内容", //input框内容
          time: dayjs(new Date).format("YY--MM--DD HH:mm"),
        }]
      }else {
        this.todoList = getlist


      }
    },
    //获取焦点
    //   this.$nextTick => {
    //
    //     })
    //   this.$nextTick(() => {
    //     this.$refs.inputBox[this.inputLength].focus
    //   }),

    // 生成id
    randomID(){
      return Number( Math.random().toString().substr(2,0)+Date.now()).toString(10)
    },



    //本地存储
    storage(){
      window.localStorage.setItem("todoList1",JSON.stringify(this.todoList))
    },



    //删除功能
    headleDelet(index,id){
      this.todo -= 1
      // console.log(index);
      // console.log(id);
      if(this.todoList[index].id ===id){
        this.todoList.splice(index,1);
        this.storage()
      }
    },



    //  选中功能
    handleSelect(index,id){
      console.log(index);
      console.log(id);
      if (this.todoList[index].id === id){
        this.todoList[index].isChecked = !this.todoList[index].isChecked
        this.storage()
      }
    },



    //  全选功能
    handleAllSelect(){
      this.todoList.forEach(item=>{
        // console.log(item);
        // if (item.isChecked) return
        item.isChecked = !item.isChecked
        this.storage()
      })
    },



    //  判断是否输入完成
    handleBlur(){
      this.storage()
    },


    //  删除功能
    handleDelete(index,id){
      if(this.todoList[index].id ===id){
        this.todoList.splice(index,1);
      }
    },



    //  修改功能
    handleEdit(index,id){
      if(this.todoList[index].id ===id){
      }
    },

  }
}
</script>



<style lang="less">
button{
  padding: 0.3125rem 0.625rem;
  border: none;
  border-radius: 0.25rem;
  color: #ffffff;
  margin-right: 0.625rem;
}

.todoListBox{
  border-radius: 0.625rem;
  width:43.75rem;
  height:22.5rem;
  background: #3C3E4F;
  position: absolute;
  //top:50%;
  //left: 50%;
  //transform: translate(-50%,-50%);
  padding:1.25rem;
  box-sizing: border-box;
  color: #ffffff;
  .header-box{
    display: flex;
    justify-content:  space-between;
    align-items: center;
    border-bottom: #ccc 1px solid;
    .header-left{
      display: flex;
      align-items: center;
      div{
        width:3.125rem;
        height: 3.125rem;
        border-radius: 50%;
        background: #9999E6;
        font-size: 1.875rem;
        text-align: center;
        margin-right: 0.9375rem;
      }
    }
    .hearder-right{
      //button{
      //  padding: 5px 10px;
      //  border: none;
      //  border-radius: 4px;
      //  color: #ffffff;
      //  margin-right: 10px;
      //}
      .allSelect{
        background: #C43F38;

      }
      .addHeard{
        background: #70B870;
      }
    }
  }

  .content{
    margin-top:1.25rem;
    height: 15.3125rem;
    overflow-y: scroll;




    .content-item{
      width: 100%;
      height: 2.8125rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #6B6F7D;
      border-radius: 0.5rem;
      padding: 0.625rem 1.25rem;
      box-sizing:  border-box;
      margin-top: 0.625rem;
      .content-left
      {
        width: 1.875rem;
        height: 1.875rem;
        border: 0.0625rem solid #cccccc;
        border-radius: 50%;
        position: relative;
        span{
          display: inline-block;
          width: 1.25rem;
          height: 1.25rem;
          background: #9999E6;
          border-radius: 50%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);;
        }
      }
      .line-through{
        color: rgba(255,255,255,0.5);  // 文字颜色
        text-decoration: line-through rgba(255,255,255,0.8); //横线颜色
      }

      .content-input{
        flex: 1;
        margin: 0 0.625rem;
        outline: none;
        background: transparent;
        border: none;
        border-bottom: 1px solid #cccccc;
        padding: 0.3125rem 0.625rem;
        color: #cccccc;
      }
      .content-right{
        display: flex;
        align-items: center;
        button{
          background: red;
          margin: 0.625rem;
        }
      }
    }
  }
}



</style>
